import {Form, InputNumber, Modal, Radio, Input, DatePicker, Cascader, Image} from "antd";
import ProForm, {ProFormText} from "@ant-design/pro-form";
import {useEffect, useState} from "react";
import {categoryList,addCoupon} from "@/services/ant-design-pro/marketing";
import Product from "../../../components/Product";
import moment from "moment";


const Create = (props) => {
  //  索要通过props传值及从父组件接受的值
  const {isModalCoupon, couponOk, handleCancel,couponCoup} = props
  //  联级选择的状态
  const [classification, setClassification ] = useState([])
  //  经 Form.useForm() 创建的 form 控制实例
  const [form] = Form.useForm();
  //  定义请求商品列表的图片
  const [src, setSrc] = useState('https://images.uiiiuiii.com/wp-content/uploads/2019/11/itz-logo20191115-2-33.jpg');
  //  商品列表 modal 状态
  const [modalGoodLists, setModalGoodLists] = useState(false)
  //  定义分类ID
  const [category_id,setCategory_id] = useState(null)
  //  定义所属商品ID
  const [product_id,setProduct_id] = useState(null)
  //  定义兑换的优惠券面值
  const [coupon_price,setCoupon_price] = useState(null)
  //  定义最低消费多少金额可用优惠券
  const [use_min_price,setUse_min_price] = useState(null)
  //  定义优惠券使用开始时间
  const [start_use_time,setStart_use_time] = useState('')
  //  定义优惠券使用结束时间
  const [end_use_time,setEnd_use_time] = useState('')
  //  定义优惠劵领取开始时间
  const [start_time,setStart_time] = useState('')
  //  定义优惠劵领取结束时间
  const [end_time,setEnd_time] = useState('')
  //  定义发布限制数量
  const [limitquantity,setLimitquantity] = useState(null)
  //  定义商品列表通过props传回来的值
  const submitGoodLists = (values) => {
    setModalGoodLists(false)
    setSrc(values.image_url)
    setProduct_id(values.id)
  }
  //  页面加载前执行 请求商品分类API（只执行一次）
  useEffect(async (params) => {
    const classification = await categoryList({...params})
    setClassification(classification)
    console.log(classification)
  }, [])

  return (
    <Modal
      destroyOnClose={true}
      title={couponCoup == '' ? "添加优惠券" : '复制优惠券'}
      visible={isModalCoupon}
      onOk={ () => {
        form.validateFields().then(async values => {
          couponOk(values)
          await addCoupon({
            ...values,
            category_id,
            product_id,
            coupon_price,
            use_min_price,
            start_use_time,
            end_use_time,
            start_time,
            end_time,
            limitquantity
          })
        })
      }} onCancel={handleCancel}>
      <ProForm
        form={form}
        name="validate_other"
        initialValues={couponCoup}
        labelAlign='right'
        submitter={false}
      >
        <ProFormText name="title" label="名称" rules={[{required: true}]} placeholder="请输入名称"/>
        <Form.Item name="receive_type" label="发送方式" initialValue='receive_one'>
          <Radio.Group>
            <Radio value="receive_one">手动领取</Radio>
            <Radio value="receive_two">新人券</Radio>
            <Radio value="receive_three">赠送券</Radio>
            <Radio value="receive_four">会员券</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="type" label="优惠券类型" initialValue='receives_one'>
          <Radio.Group>
            <Radio value="receives_one">通用券</Radio>
            <Radio value="receives_two">品类券</Radio>
            <Radio value="receives_three">商品券</Radio>
            <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.type !== curValues.type}>
              {
                (getFieldValue) => {
                  const type = getFieldValue.getFieldValue('type')
                  if (type === 'receives_two') {
                    return (
                      <Form.Item
                        style={{marginTop: '20px'}}
                        name="category_id"
                        hasFeedback
                        rules={[{required: true, message: '请选择分类'}]}
                      >
                        {
                          classification !== [] ? <Cascader
                            options={classification}
                            fieldNames={{ label: 'nickname', value: 'id'}}
                            expandTrigger="hover"
                            displayRender={(label)=> label[label.length - 1]}
                            onChange={(value)=>{
                              setCategory_id(value.pop())
                            }}
                          /> : null
                        }
                      </Form.Item>
                    )
                  }
                  if (type === 'receives_three') {
                    return (
                      <div>
                        <Image
                          width={80}
                          preview={false}
                          src={src}
                          style={{cursor: 'pointer'}}
                          onClick={() => {
                            setModalGoodLists(true)
                          }}
                        />
                        <div style={{fontSize: '10px', color: 'silver'}}>
                          选择商品
                        </div>
                      </div>
                    )
                  }
                  return ''
                }
              }

            </Form.Item>
          </Radio.Group>
        </Form.Item>

        <Form.Item name='coupon_price' label="优惠券面值" style={{marginTop: '-50px'}}>
          <InputNumber
            min={0} max={100}
            defaultValue={0}
            style={{width: 150}}
            onChange={(value)=>{
              setCoupon_price(value)
            }}
          />
        </Form.Item>

        <Form.Item name="threshold" label="使用门槛" initialValue={0}>
          <Radio.Group>
            <Radio value={0}>无门槛</Radio>
            <Radio value={1}>有门槛</Radio>
            <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.threshold !== curValues.threshold}>
              {
                (getFieldValue) => {
                  const threshold = getFieldValue.getFieldValue('threshold')
                  if (threshold === 1) {
                    return (
                      <div style={{margin: '10px'}}>
                        <InputNumber
                          name='use_min_price'
                          min={0} max={100}
                          defaultValue={0}
                          onChange={(value)=>{
                            setUse_min_price(value)
                          }}
                        />
                        <div style={{fontSize: '10px', color: 'silver'}}>
                          填写优惠券的最低消费金额
                        </div>
                      </div>
                    )
                  }
                  return ''
                }
              }
            </Form.Item>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="usagetime" label="天数" initialValue={0} style={{marginTop: '-50px'}}>
          <Radio.Group>
            <Radio value={0}>天数</Radio>
            <Radio value={1}>时间段</Radio>
            <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.usagetime !== curValues.usagetime}>
              {
                (getFieldValue:any) => {
                  const usagetime = getFieldValue.getFieldValue('usagetime')
                  if (usagetime === 0) {
                    return (
                      <div style={{margin: '10px'}}>
                        <Form.Item name="coupon_time" noStyle>
                          <InputNumber
                            min={1} max={100}
                            onChange={(value)=>{
                              setUse_min_price(value)
                            }}
                            style={{width: 150}}
                          />
                        </Form.Item>
                        <div style={{fontSize: '10px', color: 'silver'}}>
                          填写优惠券的最低消费金额
                        </div>
                      </div>

                    )
                  }else if (usagetime === 1){
                    return (
                      <Input.Group compact style={{margin: '10px'}}>
                        <DatePicker.RangePicker
                          style={{width: '70%'}}
                          onChange={(value)=>{
                            setStart_use_time(moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss'))
                            setEnd_use_time(moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss'))
                          }}
                        />
                      </Input.Group>
                    )
                  }
                }
              }
            </Form.Item>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="collectiontime" label="领取时间" initialValue={1} style={{marginTop: '-50px'}}>
          <Radio.Group>
            <Radio value={0}>限时</Radio>
            <Radio value={1}>不限时</Radio>
            <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.collectiontime !== curValues.collectiontime}>
              {
                (getFieldValue) => {
                  const collectiontime = getFieldValue.getFieldValue('collectiontime')
                  if (collectiontime === 0) {
                    return (
                      <div style={{margin: '10px'}}>
                        <Input.Group compact style={{margin: '10px'}}>
                          <DatePicker.RangePicker
                            style={{width: '70%'}}
                            onChange={(value)=>{
                              setStart_time(moment(value[0]._d).format('YYYY-MM-DD HH:mm:ss'))
                              setEnd_time(moment(value[1]._d).format('YYYY-MM-DD HH:mm:ss'))
                            }}
                          />
                        </Input.Group>
                      </div>
                    )
                  }
                  return ''
                }
              }
            </Form.Item>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="is_permanent" label="是否限量" initialValue={1} style={{marginTop: '-50px'}}>
          <Radio.Group>
            <Radio value={0}>限量</Radio>
            <Radio value={1}>不限量</Radio>
            <Form.Item shouldUpdate={(prevValues, curValues) => prevValues.is_permanent !== curValues.is_permanent}>
              {
                (getFieldValue) => {
                  const is_permanent = getFieldValue.getFieldValue('is_permanent')
                  if (is_permanent === 0) {
                    return (
                      <div style={{margin: '10px'}}>
                        <InputNumber
                          min={0} max={100}
                          defaultValue={0}
                          style={{width: 150}}
                          onChange={(value)=>{
                            setLimitquantity(value)
                          }}
                        />
                        <div style={{fontSize: '10px', color: 'silver'}}>
                          填写优惠券的发布数量
                        </div>
                      </div>

                    )
                  }
                  return ''
                }
              }
            </Form.Item>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="status" label="开启" initialValue={0} style={{marginTop: '-50px'}}>
          <Radio.Group>
            <Radio value={0}>开启</Radio>
            <Radio value={1}>关闭</Radio>
          </Radio.Group>
        </Form.Item>
      </ProForm>
      {/* 商品列表 modal */}
      <Product
        isModalGoodLists={modalGoodLists}
        goodListsOk={submitGoodLists}
        goodListsCancel={()=>{
          setModalGoodLists(false)
        }}
      />
    </Modal>
  );
};

export default Create;
